<template>
  <el-dialog
    title="增加管辖区间站场"
    width="60%"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    :append-to-body="true"
    @open="beforeOpenDialog">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="段辖线路：" prop="lineAttr">
            <select-tree
              v-model="temp.lineAttr.lineId"
              node-click
              :options="lineTreeData"
              :props="defaultProps"
              @nodeClick="changeLine"
              @clear="temp.lineAttr={}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区间站场：" prop="siteAttr">
            <el-select v-model="temp.siteAttr" value-key="id" @change="changeSite">
              <el-option
                v-for="item in siteList"
                :key="item.id"
                :label="item.siteName"
                :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="公里标：">
            <el-row type="flex" justify="space-between">
              <el-col :span="11">
                <el-form-item prop="beginRoad" label-width="0px">
                  <road-input v-model="temp.beginRoad" />
                </el-form-item>
              </el-col>
              -
              <el-col :span="11">
                <el-form-item label-width="0px" prop="endRoad">
                  <road-input v-model="temp.endRoad" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管辖里程：" prop="operateKm">
            <el-input v-model="temp.operateKm" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注信息：" prop="memo">
            <el-input v-model="temp.memo" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="updateData">
        保存
      </el-button>
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { lineList } from '@/api/dsc/location-area-info/line'
import { saveOrUpdateSite } from '@/api/dsc/system/department'
import { getListByLineId } from '@/api/dsc/location-area-info/site'
import { validPattern } from '@/utils/validate'
export default {
  name: 'DeptSystem',
  props: {
    deptAttr: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 线路树
      lineTreeData: [],
      // 数据默认字段
      defaultProps: {
        parent: 'parentId', // 父级唯一标识
        value: 'id', // 唯一标识
        label: 'label', // 标签显示
        children: 'children' // 子级
      },
      siteIndex: null, // 选择的区站
      temp: {
        lineAttr: {},
        siteAttr: {},
        deptAttr: {},
        lineSiteId: '',
        beginRoad: '',
        endRoad: '',
        memo: '',
        status: 1,
        delFlag: 0
      },
      height: 320, // table高度
      siteList: [], // 下拉数据
      rules: {
        lineAttr: {
          type: 'object',
          required: true,
          fields: { lineId: { required: true, message: '请选择' }},
          trigger: 'change'
        },
        siteAttr: {
          type: 'object',
          required: true,
          fields: { siteId: { required: true, message: '请选择' }},
          trigger: 'change'
        },
        beginRoad: [{ pattern: validPattern.roadMark, message: '请输入正确的值', trigger: 'blur' }],
        endRoad: [{ pattern: validPattern.roadMark, message: '请输入正确的值', trigger: 'blur' }],
        memo: [{ max: 255, message: '小于255个字符', trigger: 'blur' }]
      },
      listLoading: false,
      total: 0,
      dialogFormVisible: false
    }
  },
  watch: {
    dialogFormVisible(val) {
      if (val) {
        this.temp = {
          lineAttr: {},
          siteAttr: {},
          deptAttr: this.deptAttr,
          lineSiteId: '',
          beginRoad: '',
          endRoad: '',
          memo: '',
          status: 1,
          delFlag: 0
        }
      }
    }
  },
  created() {
    lineList({}).then(response => {
      this.lineTreeData = response.data
    })
  },
  mounted() {},
  methods: {
    // 选择线路
    changeLine(vm, node) {
      this.temp.lineAttr = {
        lineId: node.id,
        lineName: node.label,
        lineCode: node.obj.lineCode,
        operateKil: node.obj.operateKil,
        railType: node.obj.railType
      }
      this.getSite(node.id)
    },
    // 选择区站
    changeSite(data) {
      this.temp = Object.assign({}, this.temp, {
        siteAttr: data ? {
          id: data.id,
          siteId: data.id,
          siteName: data.siteName,
          lineId: data.lineId,
          lineSiteCode: data.lineSiteCode
        } : {},
        lineSiteId: data ? data.id : '',
        beginRoad: data ? data.beginRoad : '',
        endRoad: data ? data.endRoad : ''
      })
    },
    // 查询区站列表
    getSite(lineId) {
      this.siteList = []
      if (lineId) {
        getListByLineId(lineId).then(response => {
          this.siteList = response.data
        })
      }
    },
    // 添加数据
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveOrUpdateSite(this.temp).then(response => {
            this.$emit('addSite', response.data)
            this.dialogFormVisible = false
          })
        } else {
          return false
        }
      })
    },
    beforeOpenDialog() {
      this.$nextTick(_ => {
        this.$refs.dataForm.clearValidate()
      })
    }
  }
}
</script>
